<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css实现星空效果</title>
	<style type="text/css">
		html, body {
			height: 100%;
			overflow: hidden;
		}

		body {
			width: 100%;
			height:100%;
			background: #000;
			background-size: 100%;
			perspective: 500px;

		}
		.stars {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 4px;
			height:4px;
			-webkit-border-radius:50%;
			-moz-border-radius:50%;
			border-radius:50%;
			animation: fly 2s linear infinite;
			transform-style: preserve-3d;
		}
		.stars:before, .stars:after {
			content: "";
			position: absolute;
			width: inherit;
			height: inherit;
			box-shadow: inherit;
		}
		.stars:before {
			transform: translateZ(-300px);
			opacity: .6;
		}
		.stars:after {
			transform: translateZ(-600px);
			opacity: .4;
		}

		@keyframes fly {
		  from {
			  transform: translateZ(0px);
			  opacity: .6;
		  }
		  to {
			  transform: translateZ(300px);
			  opacity: 1;
		  }
		}
	</style>
</head>
<body>
	<div class="stars"></div>
</body>
<script>
	var w = document.documentElement.clientWidth*1.2;
	var h = document.documentElement.clientHeight*1.2;
	var star = document.getElementsByClassName("stars")[0];
	var n = 1000;
	//随机函数
	function randomNum(m, n) {
		return Math.floor(Math.random() * (n - m + 1) + m);
	}
	var str = '';
	for (var i = 0; i < n; i++) {
		var numX = randomNum(-w, w);
		var numY = randomNum(-h, h);
		var color = 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')';
		str += numX +'px'+' ' + numY+'px'+' '+ color+',';
	}
	str = str.slice(0,-1);
	star.style.boxShadow =  str;
</script>
</html>